<template>
    <div class="container">
      <div class="reg-top">
        <ul>
          <router-link tag="li" to='/reglog'><img src="./../../assets/timeNote2.jpg"/></router-link>
          <router-link tag="li" to='/log'>登录</router-link>
          <router-link tag="li" to='/reg'>注册</router-link>
        </ul>
      </div>
      <div class="reg-bottom">
        <ul class="left">
          <li :class="item.icon" v-for="(item,index) of list" :key="index"></li>
        </ul>
        <div class="right">
          <mt-field   placeholder="用户名"  v-model="username" :state="usernameState"></mt-field>
          <mt-field  placeholder="手机号"  v-model="mobile" :state="mobileState" ></mt-field>
          <mt-field  placeholder="邮箱" v-model="email" :state="emailState" ></mt-field>
          <mt-field  placeholder="密码"  type="password" v-model="password" :state="passwordState"></mt-field>
          <mt-button :disabled="disabled" @click.native="register" :type="type" size="large">注册</mt-button>
        </div>
      </div>
    </div>
</template>
<script>
import { Field, Button, Indicator } from 'mint-ui'
import Vue from 'vue'
import axios from 'axios'
Vue.use(Field, Button, Indicator)
export default {
  data () {
    return {
      username: '',
      password: '',
      mobile: '',
      email: '',
      list: [
        {icon: 'iconfont icon-yonghu1'},
        {icon: 'iconfont icon-web-icon-'},
        {icon: 'iconfont icon-xiaoxi1'},
        {icon: 'iconfont icon-mima'}
      ]
    }
  },
  computed: {
    type () {
      if (this.usernameState === 'success' && this.passwordState === 'success' && this.emailState === 'success' && this.mobileState === 'success') {
        return 'primary'
      } else {
        return 'default'
      }
    },
    disabled () {
      if (this.type === 'primary') {
        return false
      } else {
        return true
      }
    },
    usernameState () {
      if (this.username === '') {
        return ''
      }
      if (/^[\u4E00-\u9FA5A-Za-z0-9_]+$/.test(this.username)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    mobileState () {
      if (this.mobile === '') {
        return ''
      }
      if (/^1[345678]\d{9}$/.test(this.mobile)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    passwordState () {
      if (this.password === '') {
        return ''
      }
      if (/^\d{6}$/.test(this.password)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    emailState () {
      if (this.email === '') {
        return ''
      }
      if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.email)) {
        return 'success'
      } else {
        return 'error'
      }
    }
  },
  created () {
  },
  methods: {
    register () {
      axios.get('http://jx.xuzhixiang.top/ap/api/reg.php', {
        params: {
          username: this.username,
          password: this.password,
          mobile: this.mobile,
          email: this.email
        }
      })
        .then((res) => {
          console.log(res)
          if (res.data.code === 1) {
            this.$router.push('/log')
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
<style lang="scss" >
@import '@/lib/reset.scss';
.container{
    @include flexbox();
    @include flex-direction(column);
    .reg-top{
    @include rect(100%, 2.78rem);
    background: url('./../../assets/baby1.jpg')  no-repeat 0 0;
    background-size:100% 100%;
    ul{
      @include flexbox();
      justify-content:space-between;
      li{
        @include rect(0.76rem, 0.32rem);
        color:#EF98A9;
        @include align();
        font-size: 0.16rem;
        border-radius: 0.18rem;
        overflow: hidden;
        color: #83D8C3;
        background: rgba(255, 250, 218, 0.884);
        img{width:0.8rem;height:0.8rem}
        &.router-link-active {
          background: rgba(231, 231, 231, 0.555);
          color: rgba(97, 70, 70, 0.479);
        }
      }
    }
  }
  .reg-bottom{
    @include rect(100%, auto);
    @include background-color(#fff);
    @include flexbox();
    @include justify-content(space-between);
    ul{
      @include flexbox();
      @include flex-direction(column);
      width:10%;
      margin-left: 0.07rem;
      li{
        font-size:0.24rem;
        width:100%;
        height:0.60rem;
        text-align: center;
        line-height: 0.6rem;
        //  border-bottom: 1rem solid #ccc;
      }
    }
    .right {
      width: 86%;
      .mint-cell{
        width: 86%;
        display: block;
        border-bottom: 1px solid #cecece;
        .mint-cell-wrapper{
          @include rect(100%, 0.59rem);
          font-size: 0.18rem;
          border: none;
          .mint-cell-title{
            width: 0.5rem;
            border: none;
            .mint-cell-text{
              background:#f66;
              border: none;
            }
          }
        }
      }
      .mint-cell-value{
          color: #757575;
        input{
          text-indent: 0.10rem;
          color: #757575;
        }
      }
      .mint-button{
        position:fixed;
        left: 0;
        bottom:0;
        height: 0.60rem;
        font-size: 0.24rem;
        background: #83D8C3;
      }
    }
  }
}
</style>
